<template>
  <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-link to="/test">Test</router-link>
  </nav> -->

  <div class="h">

<router-view v-slot="{ Component }">
  <keep-alive include="HomeView">
    <component :is="Component" />
  </keep-alive>
</router-view>



    <footer-music></footer-music>
    <van-tabbar v-model="active" active-color="#d8402f" inactive-color="#000" route >
      <van-tabbar-item replace to="/" :icon="active ? 'music-o' :'music'  ">首页</van-tabbar-item>
      <van-tabbar-item replace to="/stations" :icon="active ? 'like' :'like-o'  ">Stations</van-tabbar-item>
      <van-tabbar-item replace to="/userinfo" :icon="active ? 'stars ' :'star-o' ">个人</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import FooterMusic from "./components/item/FooterMusic.vue";
import { mapMutations, mapState } from "vuex";
import {ref} from 'vue'
export default {
  components: { FooterMusic },
    setup() {
    
    const active = ref(0);
    return { active };
    }
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.h {
  position: relative;
}
.icon {
  width: 0.5rem;
  height: 0.5rem;
}
body {
  width: 100%;
  overflow: scroll;
  background-color: #f8f8f8;
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right)
    constant(safe-area-inset-bottom) constant(safe-area-inset-left);
  // constant在iOS<11.2的版本中生效

  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  //env在iOS>=11.2的版本中生效
}
</style>
